<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      background: red;
      font-size: 20px;
      color: yellow;
    }
  </style>
</head>
<body>
  <div class="box" style="width:100px;height:100px;border: solid 4px black;">
    文字
  </div>
</body>
<script>
  var box = document.querySelector(".box");
  console.log(box)

  console.log( box.style.width );
  console.log( box.style.height );
  console.log( box.style.border );

  console.log( box.style.background );

  box.style.width = "400px"

  console.log( getComputedStyle(box).backgroundColor );
  console.log( getComputedStyle(box).color );
  console.log( getComputedStyle(box).fontSize );

  console.log( getComputedStyle(box).width );

  // getComputedStyle(box).height = "400px"


  // console.log(box.currentStyle)


  console.log("-------")
  // ==========

  // 获取样式的兼容封装

  function getStyle(ele, attr){
    if( ele.currentStyle ){
      return ele.currentStyle[attr];
    }else{
      return getComputedStyle(ele)[attr];
    }
  }

  console.log(getStyle(box, "width"))
  console.log(getStyle(box, "height"))
  console.log(getStyle(box, "backgroundColor"))
  console.log(getStyle(box, "border"))


</script>
</html>